<template>
  <div class="input-search">
    <a-card class="search">
      <div class="content">
        <a-typography-title :level="2" style="font-family: '楷体'; font-color: #111"
        >以图见世界，以心触万象
        </a-typography-title>
        <a-row>
          <a-col :span="4"></a-col>
          <a-col :span="16">
            <a-input-search
              v-model:value="params.searchText"
              placeholder="输入关键词搜索"
              enter-button
              size="large"
              allow-clear
            >
              <template #addonBefore>
                <a-select v-model:value="selectSearchType" style="width: 10vw">
                  <a-select-option value="1">图片</a-select-option>
                  <a-select-option value="2">设计</a-select-option>
                  <a-select-option value="3">视频</a-select-option>
                  <a-select-option value="4">字体</a-select-option>
                </a-select>
              </template>
            </a-input-search>
          </a-col>
          <a-col :span="1" style="align-items: center; margin-left: 5px">
            <a-tooltip>
              <a-button @click="openSearchModal = true" :icon="h(CameraOutlined)"></a-button>
              <template #title>以图搜图</template>
            </a-tooltip>
          </a-col>
          <a-col :span="3"></a-col>
        </a-row>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">

import { h } from 'vue'
import { CameraOutlined } from '@ant-design/icons-vue'
const selectSearchType = defineModel('selectSearchType')
const openSearchModal = defineModel('openSearchModal')
const params = defineModel('params')


</script>

<style scoped lang="scss">

</style>
